<template>
  <!-- 全部竖版  每行最多3个 -->
  <template v-if="picType === 'h'">
    <ul class="h">
      <li v-for="item in list" :key="item.id" @click="handleClick(item.id)">
        <img :src="getProxyImageUrl(item.pic)" :alt="item.title" class="h-img" />
        <p class="title line-ellipsis">{{ item.title }}</p>
        <p class="tag line-ellipsis">{{ item.tag }}</p>
      </li>
    </ul>
  </template>
  <!--  第一个横版独占一行  剩余竖版每行3个  -->
  <template v-if="picType === 'wh'">
    <ul class="wh">
      <li v-if="list.length > 0" :key="list[0].id" @click="handleClick(list[0].id)">
        <img :src="getProxyImageUrl(list[0].bigpic)" :alt="list[0].title" class="wh-first-img" />
        <p class="title line-ellipsis">{{ list[0].title }}</p>
        <p class="tag line-ellipsis">{{ list[0].tag }}</p>
      </li>
      <li v-for="item in list.slice(1)" :key="item.id" @click="handleClick(item.id)">
        <img :src="getProxyImageUrl(item.pic)" :alt="item.title" class="wh-img" />
        <p class="title line-ellipsis">{{ item.title }}</p>
        <p class="tag line-ellipsis">{{ item.tag }}</p>
      </li>
    </ul>
  </template>

  <!--  全部宽版  一行2个 -->
  <template v-if="picType === 'w'">
    <ul class="w">
      <li v-for="item in list" :key="item.id" @click="handleClick(item.id)">
        <img :src="getProxyImageUrl(item.bigpic)" :alt="item.title" class="w-img" />
        <p class="title line-ellipsis">{{ item.title }}</p>
        <p class="tag line-ellipsis">{{ item.tag }}</p>
      </li>
    </ul>
  </template>
  <!--  第一个横版独占一行  剩余横板每行2个  -->
  <template v-if="picType === 'ww'">
    <ul class="ww">
      <li v-if="list.length > 0" :key="list[0].id" @click="handleClick(list[0].id)">
        <img :src="getProxyImageUrl(list[0].bigpic)" :alt="list[0].title" class="ww-first-img" />
        <p class="title line-ellipsis">{{ list[0].title }}</p>
        <p class="tag line-ellipsis">{{ list[0].tag }}</p>
      </li>
      <li v-for="item in list.slice(1)" :key="item.id" @click="handleClick(item.id)">
        <img :src="getProxyImageUrl(item.bigpic)" :alt="item.title" class="ww-img" />
        <p class="title line-ellipsis">{{ item.title }}</p>
        <p class="tag line-ellipsis">{{ item.tag }}</p>
      </li>
    </ul>
  </template>
</template>
<script setup>
import { getProxyImageUrl } from "@/util/index.js"
import { getComicChapters } from "@/api/index.js"
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

import { useStore } from '@/stores/index.js';
const store = useStore();

const firstChapterId = ref(0)


const props = defineProps(['tabItem'])

const tabItemId = computed(() => props.tabItem.id);
const list = computed(() => props.tabItem.list);
const picType = computed(() => props.tabItem.pictype);





const handleClick = async (id) => {
  //  传递ID 给 firt-content 组件，打开漫画的第一话 popUp 组件
  // console.log("漫画id", id);
  store.setOpenComicId(id);  //保存当前点击的漫画ID

  // 根据漫画ID查询对应的第一个章节的ID
  const res = await getComicChapters(id)
  // console.log("章节资源", res);
  firstChapterId.value = res.data[0]?.id;
  // console.log("firstChapterId.value", firstChapterId.value);
  store.setOpenFirstChapterId(firstChapterId.value); ///保存当前点击的漫画ID的第一个章节ID

  store.setShowPopUp(true); //打开弹窗

};



</script>
<style scoped>
ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/***************************************************************/
.h li {
  flex: 0 1 calc((100% - 20px) / 3);
  /* 每行 3 个元素，减去间距  3个元素10gap+10gap  再平均分3份 */
  box-sizing: border-box;
  /* 确保 padding 和 border 不会影响宽度 */
  background-color: #fff;
  text-align: center;
  padding: 0px;
}

.h-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 150px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}

/***************************************************************/
.w li {
  flex: 0 1 calc((100% - 10px) / 2);
  /* 每行 3 个元素，减去间距  3个元素10gap+10gap  再平均分3份 */
  box-sizing: border-box;
  /* 确保 padding 和 border 不会影响宽度 */
  background-color: #fff;
  text-align: center;
  padding: 0px;
}

.w-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 100px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}

/***************************************************************/
.ww li {
  flex: 0 1 calc((100% - 10px) / 2);
  /* 每行 3 个元素，减去间距  3个元素10gap+10gap  再平均分3份 */
  box-sizing: border-box;
  /* 确保 padding 和 border 不会影响宽度 */
  background-color: #fff;
  text-align: center;
  padding: 0px;
}

.ww-first-img {
  border-radius: 5px;
  object-fit: cover;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 100px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}

.ww-img {
  border-radius: 5px;
  object-fit: cover;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 100px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}

/***************************************************************/
.wh {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 设置子元素之间的间距 */
  padding: 10px;
  list-style: none;
  margin: 0;
}

.wh li:first-child {
  flex: 0 0 100%;
  /* 宽度为 100%，不扩展也不收缩 */
  text-align: center;
  padding: 0px;
}

.wh li:nth-child(n + 2) {
  flex: 0 0 calc((100% - 20px) / 3);
  /* 每行 3 个子元素，减去间距 */
  /* 每行 3 个元素，减去间距  3个元素10gap+10gap  再平均分3份 */
  box-sizing: border-box;
  /* 确保 padding 和 border 不会影响宽度 */
  background-color: #fff;
  text-align: center;
  padding: 0px;
}

.wh-first-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 150px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}

.wh-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 150px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}

/********************************************************* */
.ww {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 设置子元素之间的间距 */
  padding: 10px;
  list-style: none;
  margin: 0;
}

.ww li:first-child {
  flex: 0 0 100%;
  /* 宽度为 100%，不扩展也不收缩 */
  text-align: center;
  padding: 0px;
}

.ww li:nth-child(n + 2) {
  flex: 0 0 calc((100% - 20px) / 2);
  /* 每行 2 个子元素，减去间距 */
  /* 每行 2 个元素，减去间距  2个元素10gap+10gap  再平均分2份 */
  box-sizing: border-box;
  /* 确保 padding 和 border 不会影响宽度 */
  background-color: #fff;
  text-align: center;
  padding: 0px;
}

.ww-first-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 150px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}

.ww-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 100px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}




.title {
  text-align: left;
  font-size: 15px;
  color: #666;
  margin: 5px 0 5px 0;
  padding: 0;
}

.tag {
  text-align: left;
  font-size: 12px;
  color: #999;
  margin: 0;
  padding: 0;
}
</style>
